<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块二作业：盒子居中</title>
	<style type="text/css">
		/* 设置默认通用样式 */
		*{
			margin: 0;
			padding: 0;
		}
		
		/* 盒模型一 */
		.box.one{
			width: 100vw;
			height: 100vh;
			background: red;
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: -1;
		}
		.sboxone{
			width: 10vw;
			height: 10vw;
			background: #fff;
			float: inherit;
			margin: 0 auto;
		}
		
		/* 盒模型二 */
		.box.two{
			width: 100vw;
			height: 100vh;
			background: blue;
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: -1;
			display: none;
			justify-content: center;
		}
		.sboxtwo{
			width: 10vw;
			height: 10vw;
			background: #000;
			
		}
	</style>
	<script type="text/javascript">
		// 方案一设置
		// 显示方案一
		function openone(){
			const oDivOne = document.getElementById('boxone');
			const oDivTwo = document.getElementById('boxtwo');
			oDivOne.style.display = "inline";
			oDivTwo.style.display = "none";
		}
		
		
		// 方案二设置
		// 显示方案二
		function opentwo(){
			const oDivOne = document.getElementById('boxone');
			const oDivTwo = document.getElementById('boxtwo');
			oDivOne.style.display = "none";
			oDivTwo.style.display = "flex";
		}
		
	</script>
</head>
<body>
	<input type="button" id="btnone" value="启动方案一" onclick="openone()" />
	<input type="button" id="btntwo" value="启动方案二" onclick="opentwo()" />
    <!-- 居中One -->
	<div class="box one" id="boxone">
		<div class="sboxone"></div>
	</div>
	
	<!-- 居中Two -->
	<div class="box two" id="boxtwo">
		<div class="sboxtwo"></div>
	</div>
</body>
</html>